<template>
  <div class="dashboard-container">
    <div class="app-container">
      <el-card style="background: rgb(153, 204, 255);">
        <!--头部组件调用的时候传递一个isRoot标识-->
        <tree-tool
          :tree-node="company"
          :is-root="true"
          @addDept="addDept"
        />
      </el-card>
      <!-- 树形-->
      <!--tree组件的默认插槽可以指定每一行树节点的结构-->
      <el-tree
        :data="departs"
        :props="defaultProps"
        default-expand-all
      >
        <!--作用域插槽data: 每一行的数据-->
        <template #default="{data}">
          <!--传递下去的treeNode是当前的行数据-->
          <tree-tool
            :tree-node="data"
            @editDept="editDept"
            @addDept="addDept"
            @getDeparts="getDeparts"
          />
        </template>
      </el-tree>
    </div>
    <!--弹层组件：新增部门数据弹层组件 input事件用于修改数据-->
    <!--    1、父子传值-->
    <!--    2、提供了一个修改数据的方法 update:show-dialog -->

    <!--    .sync实现了数据的双向绑定-->
    <!--    v-model只能添加一个 -->
    <!--  update:属性名-->
    <add-dept
      ref="addDept"
      :show-dialog.sync="showDialog"
      :tree-node="node"
      @getDeparts="getDeparts"
    />
  </div>
</template>
<script>

import TreeTool from '@/views/departments/components/tree-tools.vue'
import { getDepartList } from '@/api/departments'
import { transListToTree } from '@/utils'
import AddDept from '@/views/departments/components/add-dept.vue'
import { Loading } from 'element-ui'

export default {
  name: 'Dept',
  components: { AddDept, TreeTool },
  data() {
    return {
      showDialog: false, // 控制新增部门弹层是否展示的标识
      company: {
        name: '传智教育',
        manager: '负责人'
      },
      defaultProps: {
        // children: 'ch', // 设置二级节点数据的key，默认是children
        label: 'name'
      },
      departs: [],
      node: {} // 点击的行数据
    }
  },
  created() {
    this.getDeparts()
  },
  methods: {
    addDept(node) {
      // node点击的部门信息对象
      // 先要把这个node存储data里面
      // 展示弹层
      this.node = node
      this.showDialog = true
    },
    // 什么时候会触发？点击编辑的时候
    // node点击的行数据

    // 1、点击了编辑按钮的时候，触发父组件的editDept方法，同时把当前点击的行数据进行传递
    // 2、editDept方法内部，记录数据，调用了弹层内部获取数据详情的方法(通过ref调用子组件方法)，同时传递id
    // 3、弹层组件内部，会根据传递过来的id请求获取部门详情数据的接口，返回的数据覆盖表单数据
    editDept(node) {
      // 点击编辑的当前行数据存起来
      this.node = node
      // 调用子组件的方法，同时把当前点击的数据的id作为参数传递
      // 获取当前的数据详情覆盖表单数据（数据回显）
      this.$refs.addDept.getDepartsDetail(node.id)
      // 让弹层展示
      this.showDialog = true
    },
    // 获取部门数据的方法
    async getDeparts() {
      // 通过js的方式开启loading效果
      // loadingService会返回一个loading实例，通过调用实例的close方法可以关闭loading效果
      const loadingInstance = Loading.service({})
      // 请求数据之前开始展示loading
      this.loading = true
      // 调用获取组织架构的接口
      const res = await getDepartList()
      // console.log(res)
      // 头部数据的替换
      // 赋值公司信息的时候，顶层节点id置为空
      this.company = {
        name: res.companyName,
        manager: '负责人',
        id: ''
      }
      // 组织架构数据的替换
      // this.departs： 处理完毕的树形结构
      this.departs = transListToTree(res.depts, '')
      // 数据请求完毕关闭loading
      // this.loading = false
      // 关闭弹层
      loadingInstance.close()
    //   组织架构数据的规则
    //   一级部门的pid是''
    //   二级部门的pid等于一级部门的id
    }
  }
}
</script>

<style scoped lang="scss">
.app-container {
  width: 800px;
  margin: 0 auto;
}
</style>
